<template>
	<view :class="themeName">
		<view class="center-box p-20">
			<view class="flex row-between p-20">
				<view class="font-size-40 bold-400">{{$zhTran('选择用户')}}</view>
				<view v-if="relevanceLength>1">
					<view class="flex" v-if="!unbindShow" @click="unbindShow=true">
						<u-icon name="setting" size="30" color="rgba(44, 115, 231, 1)" />
						<text class="m-l-10" style="color: rgba(44, 115, 231, 1);">{{$zhTran('解绑管理')}}</text>
					</view>
					<view class="flex" v-if="unbindShow" @click="unbindShow=false">
						<u-icon name="close-circle" size="30" color="rgba(44, 115, 231, 1)" />
						<text class="m-l-10" style="color: rgba(44, 115, 231, 1);">{{$zhTran('取消')}}</text>
					</view>
				</view>
			</view>

			<view class="box-item multi-info m-t-20" v-for="item,idx in relevanceList" :key="idx">
				<view class="mark" v-if="logoutShow && !item.is_used"></view>
				<view class="flex row-between p-30">
					<view class="flex" @click="toLogin(idx,item)">
						<view class="avatar m-r-20">
							<u-image width="100rpx" height="100rpx" border-radius="10%" :src="item.user.avatar" />
						</view>
						<view class="info">
							<view class="name flex row-between">
								<view class="flex">
									<text>{{item.user.nickname}}</text>
									<view class="m-l-30 m-r-10">
										<u-image width="30rpx" height="30rpx" :src="$getImageUri(item.level_img)" />
									</view>
									<text>{{item.level}}</text>
								</view>
							</view>
							<view class="m-t-20" style="color: rgba(169, 169, 169, 1);">{{item.user.mobile}}</view>
						</view>
					</view>
					<view class="flex" v-if="item.is_used" style="margin-top: -60rpx;">
						<block v-if="logoutType==0">
							<view class="circle"></view>
							<text>{{$zhTran('当前使用')}}</text>
						</block>
						<block v-if="logoutType==1">
							<view class="circle grey"></view>
							<text>{{$zhTran('正在退出...')}}</text>
						</block>
						<block v-if="logoutType==2">
							<u-loading mode="flower"></u-loading>
							<text>{{$zhTran('正在登录...')}}</text>
						</block>
					</view>
					<view v-if="!item.is_used && unbindShow" @click="unbindUser(item.user_id)">
						<view class="unbind">{{$zhTran('解绑')}}</view>
					</view>
				</view>
			</view>

			<view class="box-item leader-info m-t-20" v-if="logoutType==0" @click="toBind">
				<view class="flex p-30">
					<view class="flex row-center p-20"
						style="border: 2rpx dashed rgba(169, 169, 169, 1);border-radius: 10%;">
						<u-icon name="plus" size="40" color="rgba(166, 166, 166, 1)" />
					</view>
					<view class="font-size-28 m-l-20" style="color: rgba(116, 116, 116, 1);">{{$zhTran('添加用户')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		apiConfig,
		apiRelevanceList,
		apiUnBindUser,
		apiLoginUser
	} from "@/api/user_multi_switch"
	import Cache from "@/utils/cache";
	import {
		apiLogout, //退出登录
	} from "@/api/user";
	export default {
		props: {},
		data() {
			return {
				relevanceList: [],
				config: {},
				logoutShow: false,
				unbindShow: false,
				logoutType: 0
			}
		},
		methods: {
			...mapMutations(["login"]),
			...mapActions(["getUser"]),
			getRelevanceUser() {
				apiRelevanceList()
					.then((res) => {
						this.relevanceList = this.$zhTran(res)
					})
			},
			getConfig() {
				apiConfig()
					.then((res) => {
						this.config = this.$zhTran(res)
					})
			},
			unbindUser(user_id) {
				apiUnBindUser({
						user_id
					})
					.then((res) => {
						this.getRelevanceUser()
					})
			},
			toLogin(idx, row) {
				if (row.is_used) return

				var idx_used = this.relevanceList.findIndex((item) => {
					return item.is_used == 1
				})
				this.logoutType = 1
				this.logoutShow = true
				apiLogout().then((res) => {
					setTimeout(() => {
						this.relevanceList[idx_used].is_used = 0
						this.logoutType = 2
						this.relevanceList[idx].is_used = 1
					}, 1000)
					setTimeout(() => {
						apiLoginUser({
							user_id: row.user_id
						}).then((res) => {
							this.logoutType = 0
							this.login(res);
							this.getUser();
							// 更新购物车
							this.$store.dispatch("getCartNum");
							this.getRelevanceUser()
						}).finally(() => {
							this.logoutShow = false
						})
					}, 2000)
				});
			},
			toBind() {
				var that = this
				this.unbindShow = false
				uni.navigateTo({
					url: "/bundle2/pages/user_multi_switch/bind",
					events: {
						relervanceUser(res) {
							that.getRelevanceUser()
						}
					},
				});
			}
		},
		computed: {
			relevanceLength() {
				return this.relevanceList.length
			}
		},
		async onShow() {},

		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.getConfig()
			this.getRelevanceUser()
		},
	};
</script>

<style lang="scss" scoped>
	.center-box {

		.box-item {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.multi-info {

			position: relative;

			.mark {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fbfbfb;
				z-index: 999;
				opacity: 0.5;
			}

			.info {
				width: calc(100% - 100rpx);
				color: rgba(56, 56, 56, 1);
				font-size: 24rpx;

				&>view {
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 24rpx;
				}
			}

			.circle {
				background-color: rgba(0, 195, 87, 1);
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				margin-right: 10rpx;

				&.grey {
					background-color: rgba(169, 169, 169, 1);
				}
			}

			.unbind {
				background-color: rgba(249, 81, 81, 1);
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				color: #fff;
				border-radius: 10rpx;
			}
		}
	}
</style>